<template>
	<!-- 设置 -->
	<view>
		<image class="bg" :src="bgImg.main" mode="aspectFill"></image>
		<view class="box">
			<div class="cell-item">
				<div class="title">背景音乐：</div>
				<view class="bgm-box">
					<radio-group @change="onChangeBgm">
						<div 
							v-for="(item, index) in bgmData"
							:key="index"
							style="margin-bottom: 12rpx;"
						>
							<label class="radio"><radio name="bgmRd" :value="index + ''" :checked="index === bgmIndex" />{{item.name}}</label>
						</div>
					</radio-group>
				</view>
			</div>
			
		</view>
			
		设置
	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex';
	import * as AudioUtils from '@/utils/AudioUtils.js';
	
	export default {
		data() {
			return {
				// 我的背景图
				bgImg: uni.envConfig.bgImg,
				bgmData: uni.envConfig.bgMusicData,
			}
		},
		computed: {
			...mapState('user', {
				'bgmIndex': 'bgmIndex',
			}),
		},
		methods: {
			...mapMutations('user', {
				setBgmIndex: 'setBgmIndex',
			}),
			// 背景音乐改变
			onChangeBgm(e){
				// return;
				console.log("背景音乐改变", e);
				let bgmIndex = e.detail.value;
				this.play(bgmIndex);
			},
			/**
			 * 播放北京音乐
			 * @param {Object} index
			 */
			play(index){
				let bgmIndex = parseInt(index);
				let bgmAudioCtx = getApp().globalData.bgmAudioCtx;
				AudioUtils.playBGM(bgmAudioCtx, bgmIndex);
				this.setBgmIndex(bgmIndex);
			},
		}
	}
</script>

<style scoped>
	.bg{
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.box{
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		
		> scroll-view{
			height: 100%;
		}
		
		.item-box{
			padding: 20rpx;
			border-radius: 8rpx;
			background-color: rgba(255,255,255,0.7);
			position: relative;
			
			& + .item-box{
				margin-top: 20rpx;
			}
			
			&.self{
				background-color: rgba(255,255,255,0.8);
				box-shadow: 0 0 5px #ff9800;
			}
			
			.number{
				margin-right: 30rpx;
				
				> image{
					width: 60rpx;
					height: 60rpx;
				}
				
				> view{
					width: 60rpx;
					height: 60rpx;
					text-align: center;
					font-size: 32rpx;
					background-color: #ff9800;
					border-radius: 50%;
					color: rgba(255,255,255,0.8);
				}
			}
			
			.me{
				color: #DD524D;
				font-size: 48rpx;
				position: absolute;
				top: 15rpx;
				left: 280rpx;
				opacity: 0.75;
				transform:rotate(10deg) skewX(25deg);
			}
		}
	}
	
	.cell-item{
		padding: 12rpx;
		display: flex;
		flex-direction: row;
		color: #FFFFFF;
		margin-bottom: 24rpx;
		background-color: rgba(0,0,0,.2);
		margin: 12rpx;
		border-radius: 12rpx;
	}
	.cell-item .title{
		color: #FFFFFF;
		margin-right: 12rpx;
		
	}
	.radio{
		margin-right: 24rpx;
		margin-bottom: 12rpx;
		
	}
</style>
